<template>
  <div class="raking">
    <el-row class="title">
      <el-col :span="3">排名</el-col>
      <el-col :span="7">娱乐城</el-col>
      <el-col :span="7">玩家</el-col>
      <el-col :span="7">金额(元)</el-col>
    </el-row>
    <el-row
      v-for="(row, index) in list"
      :key="index"
      class="row"
      @click.native="jumpTo(row)"
    >
      <el-col :span="3"><span class="order">{{index + 1}}</span></el-col>
      <el-col :span="7">{{row.websitename}}</el-col>
      <el-col :span="7">{{row.username}}</el-col>
      <el-col :span="7">{{row.returnmoney}}</el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'GuaranteeRaking',
  data() {
    return {
      list: []
    };
  },
  created() {
    this.getList();
  },
  methods: {
    jumpTo(rowData) {
      console.log(rowData);
    },
    getList() {
      this.$api.getReportSort().then(data => {
        this.list = data.slice(0, 10);
      });
    }
  }
};
</script>

<style lang="less" scoped>
  @import '../../../less/global.less';
  .raking {
    margin-top: 10px;
    padding: 10px 10px;
    background: #fff;
    border-radius: 5px;
    box-shadow: 2px 2px 5px hsla(0,0%,57.6%,.3);
    .el-row {
      line-height: 40px;
      color: #666;
      cursor: pointer;
      &.title {
        font-weight: bold;
        cursor: default;
        background: @mainBgColor;
        color: #fff;
        border-radius: 5px;
      }
      .el-col {
        text-align: center;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        .order {
          display: inline-block;
          vertical-align: middle;
          width: 26px;
          height: 26px;
          line-height: 26px;
          background: #f2f7ff;
          border-radius: 5px;
        }
      }
    }
  }
</style>
